<template>
	<div class="header">
    <div class="page-title" style="line-height: 25px">销售结算单</div>
<!--		<el-button type="text" @click="dialogVisible = true,handleAdd()">添加</el-button>-->
		<el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="supply_name" label="供货公司" width="120"></el-table-column>
      <el-table-column prop="product_name" label="品名"></el-table-column>
      <el-table-column prop="xs_contract_code" label="销售合同"></el-table-column>
      <el-table-column prop="xs_num" label="销售数量(吨)"></el-table-column>
      <el-table-column prop="xs_price" label="销售单价(元)"></el-table-column>
      <el-table-column prop="total_amount" label="销售价款(元)"></el-table-column>
      <el-table-column prop="xstime" label="销售时间" width="250"></el-table-column>
			<el-table-column prop="receive_name" label="收货公司" width="160"></el-table-column>
			<el-table-column label="操作" width="150">
        <template #default="v">
          <el-button @click="handelEdit(v.row)" type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" @click="handelDelete(v.row)">删除</el-button>
          <el-button type="text" size="small" @click="download(v.row)">下载</el-button>
        </template>
			</el-table-column>
		</el-table>
    <el-pagination
        background
        hide-on-single-page
        layout="prev,page,next"
        :total="total"
        :current-page="current"
        @current-change="changePage"></el-pagination>

    <el-dialog title="品名" v-model="dialogFormadd" width="50%">
      <el-form>
        <el-form-item label="收货公司">
          <el-input v-model="form.supply_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="品名">
          <el-input v-model="form.product_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="销售合同">
          <el-input v-model="form.xs_contract_code"></el-input>
        </el-form-item>
        <el-form-item label="销售数量(吨)">
          <el-input v-model="form.xs_num" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="销售单价(元)">
          <el-input v-model="form.xs_price" @change="getTotalAmount($event)" type="number"></el-input>
        </el-form-item>
        <el-form-item label="销售价款(元)">
          <el-input v-model="form.total_amount" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="销售时间">
          <el-input v-model="form.xstime" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="收货公司">
          <el-input v-model="form.receive_name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>

<script>
import {request_xsjsdan_add,request_xsjsdan_delete,request_xsjsdan_edit,request_xsjsdan_list,request_xsjsdan_read} from "@/network/api"
	export default {
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        actionType:0, //1 添加 2 编辑
        dialogFormadd:false,
        current:1,
        total:0,
        form:{
          total_amount:0,
          xs_num:0
        }

      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init(){
        this.$nextTick(()=>{
          request_xsjsdan_list().then((res)=>{
            let result = res.data;
            if(result.code == 200){
              this.tableData = result.data.data;
              this.total = result.total;
              this.current = result.current;
            }
          }).catch()
        })
      },
      //分页
      changePage(page){
        request_xsjsdan_list({page}).then((res)=>{
          let result = res.data;
          if(result.code == 200){
            this.tableData = result.data.data;
            this.total = result.total;
            this.current = result.current;
          }
        }).catch()
      },
      //根据销售单价，销售数量计算销售金额
      getTotalAmount(e){
        this.form.total_amount = e * this.form.xs_num;
      },
      download(row){
        request_xsjsdan_read({
          id:row.id
        })
      },
      handelDelete(row){
        this.$confirm('此操作将永久删除,是否继续?','系统提示',{
          type:'warning',
          confirmButtonText:'确定',
          cancelButtonText:'取消'
        }).then(()=>{
          request_xsjsdan_delete({
            id:row.id
          }).then((res)=>{
            let result = res.data
            if(result.code == 200){
              this.$message.success({
                message:'删除成功',
                offset:70
              })
              this.changePage(this.page)
            }else{
              this.$message.error({
                message:result.message,
                offset:70
              })
            }
          }).catch()
        }).catch()
      },
			handleClose() {
				this.dialogFormadd=false
			},
			handleAdd(){
        this.dialogFormadd = true
        this.actionType = 1
			},
			handelEdit(row){
        this.dialogFormadd = true
        this.actionType = 2
        this.form = row
      },
      onSubmit(){
        if(this.form.product_name == ''){
          this.$message.warn({
            message:'品名不允许为空!',
          })
          return false;
        }
        let apiFunc;
        switch (this.actionType){
          case 1: //添加
            apiFunc = request_xsjsdan_add;
            break;
          case 2: //编辑
            apiFunc = request_xsjsdan_edit;
            break;
          default:
            this.message.error({
              message:'操作类型不正确',
              offset :70
            })
            return false;
        }
        apiFunc({
          ...this.form
        }).then((res)=>{
          let result = res.data;
          if(result.code == 200){
            this.dialogFormadd = false
            this.$message.success({
              message:result.message,
            })
            location.reload();
          }else{
            this.$message.error({
              message:result.message
            })
          }
        }).catch()
      },
		},
	}
</script>

<style>
</style>
